Review: Add color to project mockups 複習：給 Mockup 新增顏色

顏色和文字排版一樣重要，都能讓使用者用得更舒服。我們來看看 Zia's Pizza 這個例子，學習設計師是怎麼用顏色的。

準備一套配色A defined color palette

設計師在做Zia's Pizza應用時，先在Figma裡選好了幾種顏色，包括：亮紅色、深綠色、淺粉紅、淺粉綠提前準備配色有兩個好處：

1. 節省時間：需要用顏色時，直接從配色表裡拿就行

2. 看起來統一：所有按鈕和標題都用一樣的顏色

這套配色還遵循了60-30-10法則：

• 60% 基礎色（白色或淺灰色）

• 30% 搭配色（淺粉紅、淺粉綠）

• 10% 重點色（亮紅、深綠）

顏色怎麼用The color palette in action

1. 突出重點

按鈕用亮紅色，讓人一眼就看到該點哪裡。重要資訊也用紅色，比如等待時間和今日特價"The Glorious"披薩。

2. 讓畫面更好看

紅色和綠色搭配在一起會更鮮豔。用淺一點的粉紅和粉綠，配上白色背景，看起來很舒服。深灰色的文字在這些顏色上也很清楚，符合無障礙設計標準。

3. 保持品牌風格

Zia's Pizza的Logo也是亮紅色，和按鈕顏色一樣。這樣整個品牌看起來協調統一，容易記住。

顏色的含義Color psychology in design

顏色會讓人產生感覺。比如紅色 在很多地方代表食慾和活力，所以麥當勞、可口可樂都用紅色。Zia's Pizza用亮紅色，就是想讓人看到就想吃。